import React from 'react';
import './css/levelTest.less'
import TestsWelcome from './welcome'
import TestsSpeaker from './speaker'
import TestsBasic from './basic'
import EventBus from '../../utils/eventBus';

// import ParentTip from './parentTip'
import TestStart from './start'
let kidsid = ''
class LevelTest extends React.Component {
  state = {
    welcomeUrl: 'welcome.mp3',
    curpage: 0, // 0:欢迎页+扬声器测试 1:基础水平填写 2:测试提示 3:开始测试
    basicLevel: 0, // 小孩基础水平
    canHelp: 0 // 1:会帮小孩 2:不会帮小孩
  }
  // 下一步
  nextStep = () => {
    let curpage = this.state.curpage
    if(curpage === 0) {
      EventBus.$emit('stopAudio')
    }
    if (curpage < 5) {
      this.setState({
        curpage: (curpage += 1)
      })
    }
  }
  // 小孩基础回调
  getBasicLevel = (val) => {
    this.setState({
      basicLevel: val
    })
  }
  
  goUser = () => {
    this.props.history.push('/admin/adminIndex/')
  }
  // 是否帮小孩
  // getHelp = (val) => {
  //   this.setState({
  //     canHelp: val       
  //   })
  //   if (val === 1) {
  //     alert('不能帮小孩')
  //   }
  // }
  renderComp(){
    let msg = ''
    switch(this.state.curpage){
      case 0:
        msg = <TestsWelcome url={this.state.welcomeUrl}></TestsWelcome>;
        break;
      case 1:
        msg = <TestsBasic getBasicLevel={this.getBasicLevel}></TestsBasic>;
        break;
      case 2:
        msg = <TestsSpeaker></TestsSpeaker>;
        break;
      // case 3:
      //   msg = <ParentTip getHelp={this.getHelp}></ParentTip>;
      //   break;
      case 3:
        msg = <TestStart kidsid={kidsid}  basicLevel={this.state.basicLevel} goUser={this.goUser}></TestStart>;
        break;
      default:
        break;
    }
    return msg
  }
  componentWillUnmount () {
    EventBus.$emit('stopAudio')
  }
  componentDidMount() {
    kidsid = this.props.match.params && this.props.match.params.kidsid
  }
  render() {
    return (
      <div className="row level-test">
        <div className="test-content">
          <div>
            {this.renderComp()}
          </div>
          <div className="test-footer test-back" onClick={this.nextStep}>
            { this.state.curpage === 2?
              <div>
                <img  className="back-normal" alt="" src={require('../../images/tests/start-normal.png')}></img>
                <img  className="back-hover" alt="" src={require('../../images/tests/start-hover.png')}></img>
              </div>
              : this.state.curpage < 2 ?
              <div>
                <img className="back-normal" alt="" src={require('../../images/tests/next-normal.png')}></img>
                <img className="back-hover" alt="" src={require('../../images/tests/next-hover.png')}></img>
              </div>
              :''
            }
          </div>
        </div>
      </div>
    );
  }
}
export default LevelTest;